<template>
    <div class="customer-service-container">
        <div class="title">
            客服设置
            <div class="access-guide">
                <img src="@/assets/imgs/mall/customer/question-mark@2x.png" class="question-img" />
                <el-link
                    href="https://work.weixin.qq.com/nl/act/p/a733314375294bdd"
                    type="primary"
                    :underline="false"
                    target="_blank">
                    怎么在小程序中接入微信客服？
                </el-link>
            </div>
        </div>
        <div class="choose-container">
            <el-checkbox
                v-model="Data.form.serviceSwitch"
                :true-label="2"
                :false-label="1"
                label="在线客服"
                size="large" />
            <span class="access-explain">接入微信客服后，小程序中将展示联系客服入口。</span>
        </div>
        <div v-show="Data.form.serviceSwitch === 2">
            <div class="service-link-container">
                <div class="link-dec">
                    <el-form ref="formRef" :model="Data.form" :rules="rules" label-width="90px">
                        <div class="link-container">
                            <el-form-item label="企业ID" prop="corpId">
                                <el-input class="service-input" v-model.trim="Data.form.corpId" />
                            </el-form-item>
                            <div @click="(dialogVisible = true), (isGetServer = false)" class="get-link-instr">
                                如何获取企业ID？
                            </div>
                        </div>
                        <div class="link-container">
                            <el-form-item label="客服链接" prop="serviceLink">
                                <el-input class="service-input" v-model.trim="Data.form.serviceLink" />
                            </el-form-item>
                            <div @click="(dialogVisible = true), (isGetServer = true)" class="get-link-instr">
                                如何获取客服链接？
                            </div>
                        </div>
                        <el-form-item label="客服入口" prop="checkList" class="label-top">
                            <div>
                                <el-checkbox-group v-model="Data.form.checkList" class="check-container">
                                    <el-checkbox
                                        v-for="(item, index) in enterList"
                                        :key="index"
                                        :label="item.name"
                                        class="check-item" />
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <el-button type="primary" class="save-btn" @click="saveHandle">保存</el-button>
        <el-dialog v-model="dialogVisible" width="940px" top="7vh" :title="isGetServer ? '获取客服链接' : '获取企业ID'">
            <div class="tip-container">
                <p class="tip-title">
                    你需要再企业微信管理后台获取{{ isGetServer ? '客服链接' : '企业ID' }}。
                    <span v-show="!isGetServer" class="id-tip"
                        ><img
                            src="@/assets/imgs/mall/customer/icon-warning-fill@2x.png"
                            class="warning-img" />请确保企业微信和小程序主题的企业一致。</span
                    >
                </p>
                <div v-if="isGetServer">
                    <p class="tip-content">
                        1.录企业微信管理后台-进入<span class="black">『应用管理-应用』</span>， 选择<span class="black"
                            >『微信客服』</span
                        >；
                    </p>
                    <p class="tip-content">2.在<span class="black">“应用详情”</span>页面选择客服账号；</p>
                    <p class="tip-content">3.在<span class="black">“客服账号详情”</span>页页面复制客服链接。</p>
                    <img src="@/assets/imgs/mall/customer/open_customer_type.png" class="img" />
                </div>
                <div v-else>
                    <p class="tip-content">
                        1.登录企业微信管理后台 - 进入<span class="black">『我的企业-企业信息』</span>；
                    </p>
                    <p class="tip-content">2.复制企业ID。</p>
                    <img src="@/assets/imgs/mall/customer/get_company_id.png" class="img" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="warning" @click="confirmHandler">前往企业微信管理后台</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/request/index';
import { isLink } from '@/commons/utils';

const isGetServer = ref(false);
/* 该页面是否开启相关值 1 未开启 2 开启 */
const Data = reactive({
    form: {
        id: 0,
        serviceSwitch: 1,
        corpId: '',
        serviceLink: '',
        checkList: []
    }
});
const enterList = [
    {
        name: '首页'
    },
    {
        name: '个人中心'
    },
    {
        name: '商品详情页'
    },
    {
        name: '订单详情页'
    }
];

const formRef = ref(null);

const dialogVisible = ref(false);

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请填写客服链接'));
    } else if (!isLink(value)) {
        callback(new Error('链接格式不正确'));
    } else {
        callback();
    }
};

const rules = reactive({
    serviceLink: [{ required: true, validator: validatePass, trigger: 'blur' }],
    corpId: [{ required: true, message: '请填写企业ID', trigger: 'blur' }],
    checkList: [{ required: true, message: '请至少选择一个客服入口' }]
});

onMounted(() => {
    getCustomerInfo();
});

const getCustomerInfo = async () => {
    let res = await request('customerInfo');
    if (!Object.keys(res.data).length) {
        return;
    }
    Data.form = res.data;
    Data.form.checkList = [];
    if (res.data.indexPage === 2) {
        Data.form.checkList.push('首页');
    }
    if (res.data.personalCenter === 2) {
        Data.form.checkList.push('个人中心');
    }
    if (res.data.goodsDetail === 2) {
        Data.form.checkList.push('商品详情页');
    }
    if (res.data.orderDetail === 2) {
        Data.form.checkList.push('订单详情页');
    }
};

const saveHandle = () => {
    if (Data.form.serviceSwitch === 1) {
        continueSave();
        return;
    }
    formRef.value.validate(valid => {
        if (valid) {
            continueSave();
        }
    });
};
const continueSave = async () => {
    const { id, serviceSwitch, corpId, serviceLink, checkList } = Data.form;
    const params = {
        id,
        serviceLink: serviceLink,
        serviceSwitch: serviceSwitch,
        corpId: corpId
    };
    params.indexPage = Data.form.checkList.includes('首页') ? 2 : 1;
    params.personalCenter = Data.form.checkList.includes('个人中心') ? 2 : 1;
    params.goodsDetail = Data.form.checkList.includes('商品详情页') ? 2 : 1;
    params.orderDetail = Data.form.checkList.includes('订单详情页') ? 2 : 1;
    const res = await request('saveCustomerInfo', params);
    if (res.code === 0) {
        ElMessage.success('保存成功');
    } else {
        ElMessage.error(res.msg);
    }
};
const confirmHandler = () => {
    dialogVisible.value = false;
    window.open('https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome', '_blank');
};
</script>
<style lang="scss" scoped>
.customer-service-container {
    position: relative;
    .title {
        display: flex;
        justify-content: space-between;
        height: 56px;
        line-height: 56px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        border-bottom: 1px solid #eaeaea;
        .access-guide {
            display: flex;
            align-items: center;
            .question-img {
                width: 16px;
                height: 16px;
            }
        }
    }
    .choose-container {
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        .access-explain {
            width: 264px;
            height: 12px;
            margin-left: 22px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
    .service-link-container {
        display: flex;
        flex: 1;
        .link-dec {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 16px;
            .el-form-item--default {
                margin-bottom: 0 !important;
            }
            .link-container {
                display: flex;
                align-items: center;
                margin-bottom: 25px;
                .service-input {
                    width: 400px;
                }
                .get-link-instr {
                    margin-left: 8px;
                    cursor: pointer;
                    color: var(--el-color-primary);
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                }
            }
        }
    }
    .check-container {
        .check-item {
            height: 6px;
        }
    }
    .enter-choose {
        color: #fe292b;
    }
    .tip-container {
        max-height: 500px;
        overflow-y: scroll;
        .tip-title {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            .id-tip {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #ff6b00;
            }
            .warning-img {
                width: 16px;
                height: 16px;
            }
        }
        .tip-content {
            color: #6a6a6a;
        }
        .img {
            width: 100%;
        }
        .black {
            color: #33302d;
        }
    }
    .save-btn {
        margin: 24px 0 0 22px;
    }
}
</style>
<style lang="scss">
.customer-service-container {
    .label-top {
        .el-form-item__label {
            line-height: 26px !important;
        }
    }
    .el-dialog__body {
        padding-top: 9px;
    }
}
</style>
